{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "base.html" %}
{% block title %}
  {% if form.errors %}
    {% trans %}Error processing form{% endtrans %} –
  {% endif %}
  {% trans %}Create an account{% endtrans %}
{% endblock %}
{%- from "warehouse:templates/includes/input-captcha.html" import captcha_html, captcha_src %}
{% block content %}
  {% if testPyPI %}
    {% set title = "TestPyPI" %}
  {% else %}
    {% set title = "PyPI" %}
  {% endif %}
  <div class="horizontal-section">
    <div class="site-container"
         data-controller="password password-match password-strength-gauge password-breach email-confirmation">
      <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{% endtrans %}</h1>
      <aside>
        <p>
          {% trans title=title %}Before creating an account on {{ title }}, familiarize yourself with the following guidelines:{% endtrans %}
        </p>
        <ul>
          <li>{% trans title=title %}Do not use {{ title }} for any illegal or harmful activities.{% endtrans %}</li>
          <li>{% trans %}Do not impersonate others or post private information without their consent.{% endtrans %}</li>
          <li>{% trans %}Be respectful of other users and avoid abusive or discriminatory language.{% endtrans %}</li>
          <li>{% trans %}Do not post spam or distribute malware.{% endtrans %}</li>
          <li>{% trans title=title %}Do not use {{ title }} to conduct security research.{% endtrans %}</li>
        </ul>
        <p>
          {% trans aup="https://policies.python.org/pypi.org/Acceptable-Use-Policy/" %}
          For more information, please read the full <a href="{{ aup }}" rel="noopener">Acceptable Use Policy</a>.
        {% endtrans %}
      </p>
      <p>
        {% trans tos="https://policies.python.org/pypi.org/Terms-of-Service/" %}
        By registering, you agree to the <a href="{{ tos }}">PyPI Terms of Service</a>.
      {% endtrans %}
    </p>
  </aside>
  <hr>
  <dialog data-action="cancel->email-confirmation#close"
          data-email-confirmation-target="dialog">
    <form method="dialog">
      <p>
        {% trans %}Please confirm that your email address is <strong data-email-confirmation-target="email"></strong>.{% endtrans %}
      </p>
      <button class="button button--primary"
              data-action="click->email-confirmation#confirm">{% trans %}Confirm{% endtrans %}</button>
      <button class="button" formmethod="dialog" value="cancel">{% trans %}Cancel{% endtrans %}</button>
    </form>
  </dialog>
  <form method="post"
        action="{{ request.current_route_path() }}"
        data-email-confirmation-target="form">
    <input name="csrf_token"
           type="hidden"
           value="{{ request.session.get_csrf_token() }}">
    {% if form.form_errors %}
      <ul class="form-errors" role="alert">
        {% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
      </ul>
    {% endif %}
    <div class="form-group">
      <label for="full_name" class="form-group__label">
        {% trans %}Name{% endtrans %}
        {% if form.full_name.flags.required %}
          <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
        {% endif %}
      </label>
      {{ form.full_name(placeholder=gettext("Your name") ,
      autocomplete="name",
      autocapitalize="off",
      spellcheck="false",
      class_="form-group__field",
      aria_describedby="name-errors",
      ) }}
      <div id="name-errors">
        {% if form.full_name.errors %}
          <ul class="form-errors" role="alert">
            {% for error in form.full_name.errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="form-group__label">
        {% trans %}Email address{% endtrans %}
        {% if form.email.flags.required %}
          <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
        {% endif %}
      </label>
      {{ form.email(placeholder=gettext("Your email address") ,
      autocomplete="email",
      spellcheck="false",
      required="required",
      class_="form-group__field",
      aria_describedby="email-errors",
      ) }}
      <div id="email-errors">
        {% if form.email.errors %}
          <ul class="form-errors" role="alert">
            {% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
    {# The following is a honeypot field and is hidden from the user #}
    <div class="form-group confirm-form">
      <label for="confirm_form" class="form-group__label">{% trans %}Confirm form{% endtrans %}</label>
      {{ form.confirm_form(class="form-group__field",
            aria_hidden='true',) }}
    </div>
    <div class="form-group">
      <label for="username" class="form-group__label">
        {% trans %}Username{% endtrans %}
        {% if form.username.flags.required %}
          <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
        {% endif %}
      </label>
      {{ form.username(placeholder=gettext("Select a username") ,
      autocapitalize="off",
      autocomplete="username",
      spellcheck="false",
      required="required",
      class_="form-group__field",
      aria_describedby="username-errors",
      ) }}
      <div id="username-errors">
        {% if form.username.errors %}
          <ul class="form-errors" role="alert">
            {% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
    <div>
      <div class="form-group">
        <div class="split-layout">
          <label for="new_password" class="form-group__label">
            {% trans %}Password{% endtrans %}
            {% if form.new_password.flags.required %}
              <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
            {% endif %}
          </label>
          <label for="show-password">
            <input data-action="change->password#togglePasswords"
                   data-password-target="showPassword"
                   id="show-password"
                   type="checkbox">
            &nbsp;{% trans %}Show passwords{% endtrans %}
          </label>
        </div>
        {{ form.new_password(placeholder=gettext("Select a password") ,
        required="required",
        class_="form-group__field",
        autocomplete="new-password",
        spellcheck="false",
        data_password_target="password",
        data_password_match_target="passwordMatch",
        data_password_strength_gauge_target="password",
        data_password_breach_target="password",
        data_action="input->password-match#checkPasswordsMatch input->password-strength-gauge#checkPasswordStrength input->password-breach#check",
        aria_describedby="password-errors password-strength"
        ) }}
        <div id="password-errors">
          {% if form.new_password.errors %}
            <ul class="form-errors" role="alert">
              {% for error in form.new_password.errors %}<li>{{ error }}</li>{% endfor %}
            </ul>
          {% endif %}
        </div>
        {{ password_strength_gauge(data_password_strength_gauge_target="strengthGauge") }}
      </div>
      <div class="form-group">
        <label for="password_confirm" class="form-group__label">
          {% trans %}Confirm password{% endtrans %}
          {% if form.password_confirm.flags.required %}
            <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
          {% endif %}
        </label>
        {{ form.password_confirm(placeholder=gettext("Confirm password") ,
        required="required",
        class_="form-group__field",
        autocomplete="new-password",
        spellcheck="false",
        data_password_target="password",
        data_password_match_target="passwordMatch",
        data_action="input->password-match#checkPasswordsMatch",
        aria_describedby="password-confirm-errors",
        ) }}
        <div id="password-confirm-errors">
          {% if form.password_confirm.errors %}
            <ul class="form-errors" role="alert">
              {% for error in form.password_confirm.errors %}<li>{{ error }}</li>{% endfor %}
            </ul>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="form-group">
      <ul class="form-errors">
        <li data-password-match-target="matchMessage" class="hidden"></li>
        <li data-password-breach-target="message" class="hidden">
          {# djlint:off H025 #}
          {{ gettext("This password appears in a security breach or has been compromised and cannot be used. Please refer to the <a href=\"/help/#compromised-password\">FAQ</a> for more information.") }}
          {# djlint:on #}
        </li>
      </ul>
    </div>
    <div class="form-group">{{ captcha_html(request, form) }}</div>
    <input type="submit"
           value="{% trans %}Create account{% endtrans %}"
           class="button button--primary"
           data-password-match-target="submit">
  </form>
</div>
</div>
{% endblock %}
{% block extra_js %}
  {{ captcha_src(request) }}
  <script defer
          src="{{ request.static_path('warehouse:static/dist/js/vendor/zxcvbn.js') }}"></script>
{% endblock %}
